<template>
	<view class="" >
		<u-navbar leftIconColor="#000000" :titleStyle="{ color: '#000000' }" :bgColor="bgColor" title="重置密码"
			:placeholder="true" :autoBack="true"></u-navbar>
		<view class="note">

		</view>
		<view class="" style="width: 92%;margin: 0 auto;position: relative;z-index: 1;padding-top: 15px;">
			<view style="background-color: #fff;padding: 0px 15px;border-radius: 10px;">
				<u--input fontSize='16' disabled disabledColor='#fff' v-model="phone" type='number' placeholder="手机号"
					border="bottom" clearable></u--input>
				<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
				<!-- #ifndef APP-NVUE -->
				<u-input border="bottom" type="number" placeholder="验证码" v-model="code">
					<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					<u--input placeholder="验证码" type="number" v-model="code">
						<!-- #endif -->
						<template slot="suffix">
							<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
							<u-button @tap="getCode" :text="tips" type="success" size="mini"></u-button>
						</template>
						<!-- #ifndef APP-NVUE -->
				</u-input>
				<!-- #endif -->
				<!-- #ifdef APP-NVUE -->
				</u--input>
				<!-- #endif -->
				<u--input fontSize='16' v-model="password" type='password' placeholder="密码" border="bottom"
					clearable></u--input>
				<u--input fontSize='16' v-model="passwords" type='password' placeholder="再输入密码" border="none"
					clearable></u--input>
			</view>
			<view style="margin-top: 30px;">
				<u-button shape='circle' @click="btn" type="primary" text="重置密码"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '', //手机号
				password: '', //密码
				passwords: '',
				code: '',
				tips: '',
				bgColor: 'rgba(255,255,255,0)',
			}
		},
		onLoad(e) {
			this.me()
			// this.phone = e.phone
		},
		onPageScroll(e) {
			if (e.scrollTop > 50) {
				this.bgColor = '#E8F1FE'
			} else {
				this.bgColor = 'rgba(255,255,255,0)'
			}
		},
		methods: {
			async me() {
				let res = await this.$http.index.my_index()
				console.log(res);
				if (res.code == 1) {
					this.phone = res.data.userinfo.mobile
				}
			},
			codeChange(text) {
				this.tips = text;
			},
			async btn() {
				if (this.code == '') {
					this.$tips('验证码不能为空')
					return
				}
				if (this.password == '') {
					this.$tips('密码不能为空')
					return
				}
				if (this.password != this.passwords) {
					this.$tips('密码不一致')
					return
				}
				let res = await this.$http.index.resetpwd({
					mobile: this.phone,
					code: this.code,
					newpassword: this.password
				})
				if (res.code == 1) {
					this.$tips(res.msg)
					uni.removeStorageSync('token')
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/login/login'
						})
					}, 800)

				}
				console.log(res);
			},
			async getCode() {
				if (this.$refs.uCode.canGetCode) {
					let res = await this.$http.index.getcode({
						phone: this.phone,
						type: 'updatepass',
					})
					if (res.code == 1) {
						uni.$u.toast('验证码已发送');
						this.$refs.uCode.start();
					}
					// // 模拟向后端请求验证码
					// uni.showLoading({
					// 	title: '正在获取验证码'
					// })
					// setTimeout(() => {
					// 	uni.hideLoading();
					// 	// 这里此提示会被this.start()方法中的提示覆盖
					// 	uni.$u.toast('验证码已发送');
					// 	// 通知验证码组件内部开始倒计时
					// 	this.$refs.uCode.start();
					// }, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	/deep/ .uni-input-placeholder {
		color: #A7A7A8 !important;
	}

	.input-placeholder {
		font-size: 16px !important;
	}

	/deep/ .u-button--primary {
		background-color: #2447FF;
		border-color: #2447FF,
	}

	/deep/ .u-input {
		padding: 15px 0 !important;
	}

	/deep/ .u-button--success {
		background-color: transparent !important;
		border: none !important;
		color: #2447FF !important;
		font-size: 16px !important;
	}

	/deep/ .u-button__text {
		font-size: 16px !important;
	}
	.note {
		background-image: url('@/static/font/21.png');
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		background-size: 100% 100%;
	}
</style>
<style>
	page {
		background-color: #F7F9FA;
	}
</style>